<template>
  <view class="detail-button-container">
    <view class="detail-button" @click="handleClick">
      <view class="button-content">
        <text class="button-text">查看详情</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DetailButton',
  props: {
    page: {
      type: Number,
      required: true
    },
    new: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      let url = `/pages/pdf-viewer/pdf-viewer?page=${this.page}`;
      if (this.new) {
        url += '&new=true';
      }
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-button-container {
  display: flex;
  margin-bottom: 20rpx;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  z-index: 10;
}

.detail-button {
  display: inline-block;
  padding: 12rpx 20rpx;
  background: linear-gradient(135deg, #0256ff, #0257ff);
  border-radius: 6rpx;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(76, 175, 80, 0.1);
  }
  
  .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    
    .button-text {
      color: #ffffff;
      font-size: 26rpx;
      font-weight: 500;
    }
    
    .icon-arrow-right {
      color: #ffffff;
      font-size: 26rpx;
    }
  }
}
</style> 